<template>
  <div>
    <Nav></Nav>
    <div class="showContent">
      <div class="tab">
        <span style="color: rgb(143, 189, 1)">主页</span>
        <span style="color: rgb(177, 153, 153)"
          >/{{ $route.params.loginname }}的收藏</span
        >
      </div>
      <div
        class="contentbody"
        v-for="(collect, index) in collectList"
        :key="index"
      >
        <div class="bodytext container-fluid">
          <div class="imgdiv">
            <img class="uimg" :src="collect.author.avatar_url" />
          </div>
          <div class="bodyshow row">
            <div class="showleft col-lg-1">
              <span>
                <i style="color: rgb(158, 120, 196)">{{
                  collect.reply_count
                }}</i
                >/
                <i style="color: rgb(180, 186, 203)">
                  {{ collect.visit_count }}
                </i>
              </span>
            </div>
            <div class="showcenter col-lg-8">
              <a class="h6">{{ collect.title }}</a>
            </div>
            <div class="showright col-lg-1">
              <span class="dayspan"
                >{{ topicsDate(collect.last_reply_at) }}前</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collectList: [],
    };
  },
  mounted() {
    let loginname = this.$route.params.loginname;
    this.$API
      .reqGetUserCollect(loginname)
      .then((res) => (this.collectList = res.data));
  },
  computed: {
    topicsDate() {
      return (last_reply_at) => {
        //将时间字符串转换成毫秒
        let oldDate = Date.parse(last_reply_at);
        let newDate = new Date().getTime();
        let mouth =  Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30);
        let year =  Math.floor((newDate - oldDate) / 1000 / 60 / 60 / 24 / 30 / 12 );
        return mouth<=12 ? mouth+'月' : year+'年'
      };
    },
  },
};
</script>

<style scoped>
.showContent {
  width: 80%;
  margin: 20px auto;
  background: rgb(255, 255, 255);
}
.showContent .tab {
  padding: 10px;
  background: rgb(246, 246, 246);
}
.contentbody {
  height: 55px;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(240, 239, 237);
}
.bodytext {
  height: 40px;
  position: relative;
}
.contentbody:hover {
  background: rgb(240, 239, 237);
}
.imgdiv {
  display: inline-block;
  margin-left: 10px;
}
.uimg {
  margin-top: 8px;
  width: 35px;
  height: 35px;
}
.bodyshow {
  width: 98%;
  display: inline-block;
  position: absolute;
  padding: 10px;
}
.bodyshow span {
  font-size: 11px;
}
.bodyshow .h6 {
  text-decoration: none;
  color: black;
  display: inline-block;
  font-size: 16px;
  margin-left: 10px;
}
.showleft {
  margin-left: 4px;
  /* width:6%; */
  display: inline-block;
}
.showleft span {
  font-size: 6px;
}
.showcenter {
  margin: 4px 15px 2px 15px;
  /* width: 70%; */
  display: inline-block;
}
.showright {
  /* width: 5%; */
  display: inline-block;
}
.dayspan {
  color: rgb(123, 128, 135);
}
i {
  font-style: normal;
}
</style>